<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2025-02-25 17:53:10
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-25 21:02:02
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\dashboard\components\homeRight\volatilityPrice.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
  import { ref } from "vue"
  import Card from "../homeCard.vue"
  import Table from './components/homeTable.vue'
  import { getPriceFluctuation } from '@/api/newHome'
  // 为审核采购单
  const unPurchaseList = ref([])
  const count = ref(0)

  const getPriceFluctuationApi = async () => {
    let res = await getPriceFluctuation({
      currentPage: 1,
      pageSize: 10,
      sortingFields: [
        {
          field: "",
          order: ""
        }
      ]
    })
    if (res.code == 2000) {
      unPurchaseList.value = res.data.records
    }
  }

  const colomns = [{
    key: 'index',
    name: '序号'
  }, {
    key: 'skuName',
    name: '商品名',
    width: '156px'
  }, {
    key: 'skuClassName',
    name: '类型',
    width: '50px'
  },
  {
    slot: 'price',
    name: '价格',
    width: '80px'
  },
  ]
  onMounted(() => {
    getPriceFluctuationApi()

  })
</script>

<template>
  <div class="purchaseReview">
    <Card title="物价波动" path="/priceinquiry">

      <div class="mt-3" style="height: 100%;">
        <Table v-if="unPurchaseList.length > 0" :data="unPurchaseList" :colomns="colomns">
          <template v-slot:price="row">
            <div class="price">
              {{ row.price }}
              <div v-if="row.priceComparisonResult == 'equal'" style="color: var(--pb-color-light-6);"
                class="icon ml-2">
                0<pb-icon name="1forward"></pb-icon>
              </div>
              <div v-if="row.priceComparisonResult == 'rise'" style="color: #09B562;" class="icon ml-2">
                {{ Math.round(row.fluctuationPercentage) }}%<pb-icon name="down"></pb-icon>
              </div>
              <div v-if="row.priceComparisonResult == 'decrease'" style="color: #F52F3E;" class="icon ml-1">
                {{ Math.round(row.fluctuationPercentage) }}%<pb-icon name="forward"></pb-icon>
              </div>
              <div v-if="row.priceComparisonResult == 'empty'" class="icon"
                style="color: var(--pb-color-light-8); justify-content: space-around;">--</div>


            </div>
          </template>
        </Table>

        <div class="noData" v-else>
          <img src="@/assets/images/noData.png" width="80px" height="80px" />
          <div class="font">暂无数据</div>
        </div>


      </div>

    </Card>
  </div>
</template>

<style lang="scss" scoped>
  .purchaseReview {
    height: calc(100% - 24px);

  }

  .price {
    display: flex;
    justify-content: end;
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 14px;
    color: #0D968B;
    padding: 7px 0px;
    ;
  }

  .icon {
    margin-left: 4px;
    width: 40px;
    display: flex;
    justify-content: end;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .noData {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
  }
</style>